<template>
	<div class="">
		<div class="conPpageBox">

			<div class="navbar">
				<div class="hearderBoxIcon" @click="goBack">
					<img src="../../assets/images/fanhuijiantou.png" alt="">
				</div>
				<div class="title">{{$t('indexTitle.title27')}}</div>
				<div class="right" @click="goNextPage('/promotion',$t('indexTitle.title106'))">
					{{$t('indexTitle.title248')}}
				</div>
			</div>
			<div class="info-block">
				<div class="content">
					<div class="row">
						<div class="account">
							<img src="../../assets/images/geren.png" alt="" />
							<span>{{info.name}}</span>
						</div>
						<div class="balance-label">
							<img src="../../assets/images/yue.png" alt="" />
							<span>{{$t('indexTitle.title249')}}</span>
						</div>
					</div>
					<div class="row" style="justify-content: flex-end;">
						<div class="balance-value">{{info.money||0}}</div>
					</div>
				</div>
			</div>
			<div class="bottom-block">
				<div class="withdrawal-block">
					<div class="">
						<div class="rows withdrawalAmount">
							<div class="label">{{$t('indexTitle.title183')}}</div>
							<div class="value">
								<!-- @input="shuru()" @blur="blurnum()" -->
								<el-input :class="{errorww:isShowThreess,error:blurnumstyle}" v-model="num"
									@blur="blurnum()" @input="inputjianting(0)"></el-input>
								<div v-if="!blurnumstyle" class="tips">{{$t('indexTitle.title184')}} 0.00</div>
								<div v-if="blurnumstyle" class="tips1">
									<img src="../../assets/images/zhuyitow.png" alt="">
									{{tips}}
								</div>
								<div v-if="isShowThreess" class="tips1">{{messageText}}</div>
							</div>
						</div>
					</div>
					<div class="">
						<div class="rows withdrawalAmount" style="margin-top: 20px;">
							<div class="label">{{$t('indexTitle.title185')}}</div>
							<div class="value">
								<el-input v-model="password" :class="{errorww:isShowThreess,error:blurpsdstyle}"
									type="password" @blur="blurpsd()" @input="inputjianting(1)"></el-input>
								<div v-if="blurpsdstyle" class="tips1">
									<img src="../../assets/images/zhuyitow.png" alt="">{{tips1}}
								</div>
								<div v-if="isShowThreess" class="tips1">{{messageText}}</div>
							</div>
						</div>
					</div>
					<div class="rows bottom">
						<div class="rows" style="align-items: center;">
							<div class="label">{{$t('indexTitle.title186')}}</div>
							<div class="value actualwithdrawalamt">{{num || 0.00}}</div>
						</div>
					</div>
					<el-button @click="drawing()" class="wqetijiao">{{$t('indexTitle.title27')}}</el-button>
				</div>
				<!-- <div class="card">
				<div class="top">
					<img src="../../assets/images/tixian.webp" alt="" />
					<div class="rights">
						<div class="titles">{{$t('indexTitle.title250')}}</div>
						<div class="total">
							<div class="labels">{{$t('indexTitle.title184')}}</div>
							<div class="values">0.00</div>
						</div>
					</div>
				</div>
				<div class="cardbottom" v-if="!cardbottom" @click="cardbottom = true">{{$t('indexTitle.title251')}}
				</div>
				<div class="cardbottom1" v-if="cardbottom" @click="cardbottom = false">
					<div class="items">
						<div class="label1">{{$t('indexTitle.title252')}}</div>
						<div class="value1">0.00</div>
					</div>
					<div class="items">
						<div class="label1">{{$t('indexTitle.title253')}}</div>
						<div class="value1">0.00</div>
					</div>
					<div class="items">
						<div class="label1">{{$t('indexTitle.title254')}}</div>
						<div class="value1">0.00</div>
					</div>
				</div>
			</div> -->
				<div class="card">
					<div class="top">
						<img src="../../assets/images/tixian1.webp" alt="" />
						<div class="rights">
							<div class="titles">{{$t('indexTitle.title305')}}</div>
							<div class="total">
								<!-- <div class="labels">{{$t('indexTitle.title184')}}</div> -->
								<div class="values">{{info.ml_money}}</div>
							</div>
						</div>
					</div>
					<div class="cardbottom" v-if="!cardbottom1" @click="cardbottom1 = true">
						{{$t('indexTitle.title251')}}
					</div>
					<div class="cardbottom1" v-if="cardbottom1" @click="cardbottom1 = false">
						<div class="items">
							<div class="label1">{{$t('indexTitle.title305')}}</div>
							<div class="value1">{{info.ml_money}}</div>
						</div>
						<!-- <div class="items">
						<div class="label1">{{$t('indexTitle.title253')}}</div>
						<div class="value1">0.00</div>
					</div> -->
					</div>
				</div>
			</div>

			<!-- <div class="buttons">
			<img src="../../assets/images/xiaoxi.png" alt="" />
		</div> -->

		</div>
		<el-dialog title="" :visible.sync="centerDialogVisible" width="85%" :show-close='false'
			style="margin-top: 20vh;" center>
			<span>{{$t('indexTitle.title299')}}</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisible = false"
					class="quxiaobut">{{$t('indexTitle.title300')}}</el-button>
				<el-button type="primary" @click="jixuAPI" class="jixubut">{{$t('indexTitle.title301')}}</el-button>
			</span>
			<div class="jiazaidonghua" v-if="isloadingTowShow">
				<img src="../../assets/img/loading-ani.svg" alt="">
			</div>
		</el-dialog>
		<loadingFour :msgText="msgTextTow" :isShowCloseBot="isShowCloseBot" v-if="isShowLoadingTeow"
			@closeGuanbiTow="closeGuanbi"></loadingFour>
	</div>
</template>

<script>
	import {
		userinfo,
		drawingsubmit,
		transferAll
	} from "../../utils/api.js"
	import loadingFour from '../../components/loadingFour.vue';
	export default {
		data() {
			return {
				num: '',
				password: '',
				blurnumstyle: false,
				tips: '',
				blurpsdstyle: false,
				tips1: '',

				cardbottom: false,
				cardbottom1: false,

				info: [],

				isShowThreess: false,
				messageText: "",
				centerDialogVisible: true,
				isloadingTowShow: false,
				msgTextTow: "",
				isShowLoadingTeow: false,
				isShowCloseBot: false,
			}
		},
		components: {
			loadingFour
		},
		mounted() {
			if (localStorage.getItem("userInfo")) {
				this.info = JSON.parse(localStorage.getItem('userInfo'))
			}
			this.getuserinfo(1)
		},
		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			getuserinfo(num) {
				userinfo().then((res) => {
					if (res.status.errorCode == 0) {
						localStorage.setItem('userInfo', JSON.stringify(res.data))
						this.info = JSON.parse(localStorage.getItem('userInfo'))
						if (num == 2) {
							this.$router.push({
								path: '/promotion',
								query: {
									title: this.$t('indexTitle.title106')
								}
							});
						}
						if (num == 3) {
							this.centerDialogVisible = false;
							this.isloadingTowShow = false;
						}
					} else if (res.status.errorCode == 401) {
						console.log('401')
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						this.isShowCloseBot = false;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			inputjianting(num) {
				if (num == 0) {
					if (this.num == '') {
						this.blurnumstyle = true
						this.tips = this.$t('indexTitle.title189')
					} else {
						this.blurnumstyle = false
						this.isShowThreess = false;
						this.messageText = '';
					}
				}
				if (num == 1) {
					if (this.password == '') {
						this.blurpsdstyle = true
						this.tips1 = this.$t('indexTitle.title190')
					} else {
						this.blurpsdstyle = false
						this.isShowThreess = false;
						this.messageText = '';
					}
				}
			},
			blurnum() {
				let num = Number(this.num)
				if (this.num == '') {
					this.blurnumstyle = true
					this.tips = this.$t('indexTitle.title58')
				}
				// else if(num < 1 || num > 10){
				// 	this.blurnumstyle = true
				// 	this.tips = '提款金额应介于 1.00 与 10.00 之间'
				// }
				else {
					this.blurnumstyle = false
				}
			},
			blurpsd() {
				if (this.password == '') {
					this.blurpsdstyle = true
					this.tips1 = this.$t('indexTitle.title58')
				} else {
					this.blurpsdstyle = false
				}
			},
			shuru() {
				let num = Number(this.num)
				if (num < 1 || num > 10) {
					this.blurnumstyle = true
					this.tips = this.$t('indexTitle.title187')
				} else {
					this.blurnumstyle = false
				}
			},
			drawing() {
				let that = this;
				this.isShowThreess = false;
				this.blurpsdstyle = false;
				this.blurnumstyle = false;
				this.tips = '';
				this.tips1 = '';
				this.messageText = '';
				if (this.info.bank_card == '' || this.info.bank_card == null) {
					// this.$message.error('请先绑定银行卡');
					this.isShowThreess = true;
					this.messageText = this.$t('indexTitle.title188');
					this.$router.push('/bankcards')
					return false
				}
				if (this.num == '') {
					this.blurnumstyle = true
					this.tips = this.$t('indexTitle.title189')
					// this.$message.error('请输入提现金额');
					return false
				}
				if (this.password == '') {
					this.blurpsdstyle = true
					this.tips1 = this.$t('indexTitle.title190')
					// this.$message.error('请输入提现密码');
					return false
				}
				let data = {
					money: this.num,
					qk_pwd: this.password
				}
				drawingsubmit(data).then((res) => {
					if (res.status.errorCode == 0) {
						// this.$message.success(res.status.msg);
						that.getuserinfo(2)
					} else {
						this.isShowThreess = true;
						this.messageText = res.status.msg;
						// this.$message.error(res.status.msg);
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			goBack() {
				this.$router.go(-1)
			},
			goNextPage(page, title) {
				this.$router.push({
					path: page,
					query: {
						title: title
					}
				});
			},
			jixuAPI() {
				this.isloadingTowShow = true;
				transferAll({}).then((res) => {
					if (res.status.errorCode == 0) {
						this.info = [];
						this.getuserinfo(3)
						// this.$message.success(res.status.msg);
					} else {
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						this.isShowCloseBot = false;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});

			},
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.conPpageBox {
		height: 90vh;
		overflow-y: auto;
		overflow-x: hidden;
		padding-top: calc(constant(safe-area-inset-top) + 0px);
		padding-top: calc(env(safe-area-inset-top) + 0px);
		padding-bottom: calc(constant(safe-area-inset-bottom) + 85px);
		padding-bottom: calc(env(safe-area-inset-bottom) + 85px);
		box-sizing: border-box;
		position: fixed;
		z-index: 1;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}

	.navbar {
		background-color: #fff;
		box-shadow: inset 0 -1px 0 #ececec;
		color: #545658;
		height: 45px;
		left: 0;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		padding: 0 10px;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	.hearderBoxIcon {
		flex: .25;
		line-height: 1;
	}

	.hearderBoxIcon img {
		width: 26px;
		height: 26px;
	}

	.title {
		flex: 1;
		font-size: 20px;
		line-height: 1;
		text-align: center;
	}

	.right {
		flex: .25;
		line-height: 1;
		font-size: 13px;
	}

	.info-block {
		background-color: #fbfbfb;
		border-bottom-left-radius: 110px 45px;
		border-bottom-right-radius: 110px 45px;
		width: 100%;
		margin-top: 45px;
	}

	.content {
		background: linear-gradient(135deg, #7240ff, #7240ff 45%, #895fff 0, #7240ff);
		padding: 10px 15px 10px 0;
		position: relative;
		z-index: 1;
	}

	.row {
		color: #fff;
		display: flex;
		justify-content: space-between;
	}

	.account {
		align-items: center;
		display: flex;
		font-size: 14px;
		background-color: #4c0dff;
		border-radius: 0 100px 100px 0;
		height: 30px;
		padding: 3px 15px;
	}

	.account img {
		width: 20px;
		height: 20px;
		margin-right: 3px;
	}

	.balance-label {
		align-items: center;
		display: flex;
		font-size: 14px;
	}

	.balance-label img {
		width: 20px;
		height: 20px;
		margin-right: 3px;
	}

	.balance-value {
		font-size: 24px;
		line-height: 31px;
		font-weight: 600;
	}

	.bottom-block {
		padding: 30px 15px 15px;
		width: 100%;
		color: #777;
	}

	.withdrawal-block {
		min-height: 250px;
		position: relative;
		background: #fafafc;
		border: 1px solid #ececec;
		border-radius: 5px;
		margin-bottom: 10px;
		padding: 10px;
		width: 100%;
	}

	.rows {
		display: flex;
		justify-content: space-between;
		padding: 0 5px;
		width: 100%;
	}

	.withdrawalAmount {
		align-items: flex-start;
	}

	.label {
		align-items: center;
		display: flex;
		height: 44px;
		font-size: 14px;
	}

	/deep/ .el-input__inner {
		box-sizing: border-box;
		height: 44px;
		width: 150px;
		background-color: #fbfbfb;
		border: 1px solid #e9e9e9;
		text-align: right;
	}

	/deep/ .error .el-input__inner {
		border: 1px solid #e94951;
	}

	.value {
		text-align: right;
	}

	.tips {
		margin-top: 10px;
		color: #777;
		font-size: 10px;
		text-align: right;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.tips1 {
		margin-top: 10px;
		color: #e94951;
		font-size: 13px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
	}

	.tips img,
	.tips1 img {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.rows.bottom {
		align-items: flex-start;
		border-top: 1px solid #e9e9e9;
		flex-direction: column;
		margin-top: 13px;
		padding-top: 22px;
	}

	.actualwithdrawalamt {
		color: #5235ff;
		font-size: 24px;
		text-align: right;
	}

	/deep/.wqetijiao {
		border-radius: 5px;
		height: 42px;
		margin-top: 10px;
		background-color: #7240ff;
		color: #fff;
		width: 100%;
		font-size: 16px;
	}

	/deep/.quxiaobut {
		border-radius: 5px;
		height: 42px;
		margin-top: 10px;
		background-color: #666666;
		color: #fff;
		width: 43%;
		font-size: 16px;
	}

	/deep/.jixubut {
		border-radius: 5px;
		height: 42px;
		margin-top: 10px;
		background-color: #6b42f5;
		color: #fff;
		width: 43%;
		font-size: 16px;
	}

	/deep/.el-dialog__footer {
		padding: 0px 0px 20px;
	}

	/deep/.el-dialog--center .el-dialog__body {
		padding: 20px 20px 10px;
		font-size: 18px;
		text-align: center;
	}

	/deep/.el-dialog--center {
		border-radius: 5px;
	}

	.card {
		padding: 15px 0 0;
		background: #fafafc;
		border: 1px solid #ececec;
		border-radius: 5px;
		margin-bottom: 10px;
		width: 100%;
	}

	.top {
		align-items: center;
		border-bottom: 1px solid #e9e9e9;
		display: flex;
		padding: 0 15px 10px;
	}

	.top img {
		height: 40px;
		width: auto;
	}

	.rights {
		color: #939698;
		padding-left: 10px;
		flex: 1;
	}

	.titles {
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 10px;
	}

	.total {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.labels {
		font-size: 12px;
	}

	.values {
		font-size: 20px;
		font-weight: 500;
	}

	.cardbottom {
		background-color: #e1e1e1;
		border-radius: 0 0 5px 5px;
		color: #939698;
		font-size: 12px;
		padding: 8px 0;
		text-align: center;
	}

	.cardbottom1 {
		color: #939698;
		background-color: #fbfbfb;
		border-radius: 0 0 5px 5px;
		padding: 10px 15px;
		width: 100%;
	}

	.items {
		align-items: center;
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
		padding: 0 5px;
		width: 100%;
	}

	.label1 {
		color: #939698;
		font-size: 12px;
	}

	.value1 {
		color: #545658;
		font-size: 14px;
		font-weight: 500;
	}

	.buttons {
		position: fixed;
		bottom: 10%;
		right: 10px;
		background-color: #99D2E3;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.buttons img {
		width: 32px;
		height: 32px;
	}

	.jiazaidonghua {
		height: 100px;
		width: 100px;
		background-color: #313131;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		z-index: 99999;
	}

	.jiazaidonghua img {
		height: 45px;
		width: 45px;
	}
</style>